<!-- 影像号维护 -->
<template>
  <div class="image-content ky-container">
    <el-card shadow="hover" class="ky-card ky-card-hdbg">
      <div class="image-main">
        <div class="title">影像号维护</div>
        <el-table
          ref="table"
          v-loading="loading"
          size="medium"
          :data="tableData"
          style="width: 100%"
          border
          class="ky-table"
        >
          <el-table-column type="selection" width="40" label="选择"></el-table-column>
          <!-- <el-table-column align="left" prop="ID" label="ID"></el-table-column> -->
          <el-table-column align="left" prop="dep" label="检查部门"> </el-table-column>
          <el-table-column align="left" prop="modality" label="检查设备"></el-table-column>
          <el-table-column align="left" prop="charFlag" label="前缀符号"></el-table-column>
          <!-- <el-table-column align="left" prop="startNumber" label="初始号码"></el-table-column> -->
          <el-table-column align="left" label="操作" v-if="$store.state.app.permission" width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="openEditor(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row.id)"><i class="el-icon-delete"></i> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <paginationCont
          :total="totalCount"
          :page.sync="currentPage"
          :limit.sync="pageSize"
          @pagination="changePagenation"
        />
      </div>
      <div class="right-panel">
        <div class="panel-head">
          <div class="title">{{currentStatus === pageStatus.add ? '添加':'编辑'}}</div>
          <div class="blue-color" @click="addClick" v-show="currentStatus === pageStatus.edit"><i class="el-icon-plus icon"></i>新增</div>
        </div>
        <el-form inline class="rule-form" ref="form" :model="ruleForm" :rules="rules">
          <el-form-item label="检查部门:" prop="dep" class="short-input">
            <el-select size="small" class="param-type_input" v-model="ruleForm.dep" placeholder="请选择" clearable collapse-tags @change="handleChange('dep')">
              <el-option
                v-for="(item,index) in depOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查设备:" prop="modality" class="short-input">
            <el-select size="small" class="param-type_input" v-model="ruleForm.modality" placeholder="请选择" clearable collapse-tags>
              <el-option
                v-for="(item,index) in modalityOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="前缀符号:" prop="charFlag" class="short-input">
            <el-input size="small" v-model="ruleForm.charFlag" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- <el-form-item label="初始号码:" prop="startNumber" class="short-input">
            <el-input size="small" v-model="ruleForm.startNumber" placeholder="请输入"></el-input>
            </el-form-item> -->
          <el-form-item class="buttons">
            <el-button class="m-l-1" type="primary" size="small" @click="handleConfirm">保存</el-button>
            <el-button v-if="currentStatus === pageStatus.add" class="m-l-1" size="small" @click="handleCancle">取消</el-button>
            <el-button v-else class="m-l-1" size="small" type="danger" plain @click="handleDelete(ruleForm.id)">删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getModalityList, getDepList, getXnoPages, setXnoPages, updateXnoPages, deleteXnoPages } from '@/api/api.js'
import { PageStatus } from '@/utils/constant'
import paginationCont from '@/components/Pagination/index'
export default {
  name: '',
  mixins: [],
  components: { paginationCont },
  data() {
    return {
      pageStatus: PageStatus,
      currentStatus: PageStatus.add,
      loading: false,
      tableData: [],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      multipleSelection: [],
      depOptions: [],
      modalityOptions: [],
      ruleForm: {
        hospitalCode: this.$store.state.user.hospitalCode,
        dep: '',
        modality: '',
        charFlag: '',
        startNumber: ''
      },
      rules: {
        dep: { required: true, message: '请选择检查部门', trigger: ['blur', 'change'] },
        modality: { required: true, message: '请选择检查设备', trigger: ['blur', 'change'] },
        charFlag: { required: true, message: '请填写前缀符号', trigger: 'blur' }
      }
    }
  },
  watch: {},
  computed: {},
  created() {

  },
  mounted() {
    this.getScheduledDepOptions()
    this.getScheduledModalityOptions()
    this.fetchData()
  },
  methods: {
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.currentStatus === this.pageStatus.add) {
            setXnoPages(this.ruleForm).then((res) => {
              if (res.code === 10000) {
                this.$message.success('保存成功')
                this.changePagenation()
                this.loading = false
                this.handleReset()
              }
            }).catch(() => {
              this.loading = false
            })
          } else {
            updateXnoPages(this.ruleForm).then((res) => {
              if (res.code === 10000) {
                this.$message.success('修改成功')
                this.changePagenation()
                this.loading = false
                this.handleReset()
                this.currentStatus = this.pageStatus.add
              }
            }).catch(() => {
              this.loading = false
            })
          }
        }
      })
    },
    handleCancle() {
      this.handleReset()
    },
    handleReset() {
      this.$refs.form.resetFields()
    },
    getScheduledDepOptions() {
      /* 检查部门列表 */
      let params = {
        hospitalCode: this.ruleForm.hospitalCode
      }
      getDepList(params).then((res) => {
        if (res.code === 10000) {
          this.depOptions = res.content.list
        }
      })
    },
    getScheduledModalityOptions() {
      /* 检查设备列表 */
      let params = {
        hospitalCode: this.ruleForm.hospitalCode,
        dep: this.ruleForm.dep
      }
      getModalityList(params).then((res) => {
        if (res.code === 10000) {
          this.modalityOptions = res.content.list
        }
      })
    },
    handleChange(val) {
      switch (val) {
        case 'dep':
          this.getScheduledModalityOptions()
          this.ruleForm.modality = ''
          break
        default:
          break
      }
    },
    openEditor(row) {
      /* 编辑 */
      this.currentStatus = this.pageStatus.edit
      this.ruleForm = Object.assign(this.ruleForm, row)
      this.getScheduledModalityOptions()
    },
    handleDelete(id) {
      /* 删除 */
      this.loading = true
      deleteXnoPages({ id: id }).then((res) => {
        if (res.code === 10000) {
          this.$message.success('删除成功')
          this.changePagenation()
          this.handleReset()
          this.currentStatus = this.pageStatus.add
        }
      }).catch(() => {
        this.loading = false
      })
    },
    addClick() {
      this.currentStatus = this.pageStatus.add
      this.handleReset()
      this.getScheduledModalityOptions()
    },
    fetchData() {
      let data = {
        HospitalCode: this.ruleForm.hospitalCode,
        pageSize: this.pageSize,
        pageNumber: this.currentPage
      }
      getXnoPages(data).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tableData = res.content.list
          this.totalCount = res.content.totalCount
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    changePagenation() {
      this.fetchData()
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.image-content{
    display: flex;
    .title{
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 15px;
    }
    .image-main{
        width:calc(100% - 250px);
        padding:20px
    }
    .right-panel{
            width:250px;
            padding: 20px;
            border-left: 1px solid #e4e7ed;
            .panel-head{
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
            .buttons{
                margin-bottom: 0px;
                margin-top: 10px;
                .el-button{
                    width:90px;
                }
            }
        }
        .blue-color{
            color:#1890FF;
            cursor: pointer;
        }
        .icon{
            margin-right:4px;
        }
}
</style>
